<template>
  <!-- 兼职招聘 -->
  <view class="box" @click="external">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click.stop="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      兼职招聘
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text @click="fanhui" style="position: absolute; left: 50%; transform: translateX(-50%)"
        >兼职招聘</text
      >
      <!-- #endif -->
      <image
        @click="sousuo"
        class="image2"
        src="https://pic.bangbangtongcheng.com/static/sousuo.png"
        mode="widthFix"
      />
    </view>
    <view class="tit">
      <view class="xuan view">推荐职位</view>
      <view class="tit_right">
        <view class="sort" @click.stop="sortChage = !sortChage">
          排序
          <span>▼</span>
          <view class="administrations" v-if="sortChage">
            <text class="items" @click="sortChages(1)"> 最新发布 </text>
            <text class="items" @click="sortChages(2)"> 距离最近 </text>
          </view>
        </view>
        <view class="sai" @click.stop="showModal" data-target="DrawerModalR">
          筛选
          <span>▼</span>
        </view>
      </view>
    </view>
    <view
      class="tit_list"
      :style="'height: calc(100vh - 88rpx - 120rpx - ' + statusBarHeight1 + 'px);'"
    >
      <scroll-view
        class="scroll-view"
        :scroll-y="modalName == '' || modalName == null"
        @scrolltolower="down"
        :scroll-top="scrollTop1"
        @scroll="scroll"
        refresher-background="#f5f5f5"
      >
        <view
          class="vacancy"
          v-for="(item, index) in Recommend"
          :key="index"
          @click="details(item)"
        >
          <view class="vehicleRecom">
            <span class="tagLabel">兼职</span>
            <span>{{ item.title }}</span>
          </view>
          <view class="vacancy_center">
            <view class="vacancy_status">
              <span>{{ item.region }}</span>
              <span>{{ item.positionCategory }}</span>
            </view>
            <view class="vacancy_price"
              >{{ item.salaryRange.split(',').join('') }}&emsp;{{ item.settlementMethod }}</view
            >
          </view>
          <view class="vacancy_biaoq" v-if="item.fringeBenefits">
            <view class="vacancy_label">
              <view class="shade"> </view>
              <view class="label" v-for="(i, j) in item.fringeBenefits.split(',')" :key="j">{{
                i
              }}</view>
            </view>
            <view class="gend" v-if="item.fringeBenefits.split(',').length > 4"> 更多> </view>
          </view>
          <view class="personalInformation">
            <view class="personalInformation_left">
              <view class="GR">
                <image
                  class="personalInformation_image"
                  v-if="item.userInformationDto.image"
                  :src="item.userInformationDto.image"
                  mode=""
                ></image>
                <image
                  class="personalInformation_image"
                  v-else
                  src="https://pic.bangbangtongcheng.com/static/my/header.png"
                  mode=""
                ></image>
                <span class="name">{{
                  item.userInformationDto.nikeName ? item.userInformationDto.nikeName : '未命名用户'
                }}</span>
              </view>
              <view class="GS" v-if="item.userInformationDto.enterpriseRecruitmentStatus">
                <view class="personalInformation_image"></view>
                <span class="corporation">{{ item.enterpriseName }}</span>
              </view>
            </view>
            <view class="personalInformation_right">
              <span class="personalInformation_Time">{{ $Time.getDateDiff(item.createDate) }}</span>
              <span class="personalInformation_distance">{{ item.distance }}km</span>
            </view>
          </view>
        </view>
        <view v-if="Recommend.length == 0" class="none">
          <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
          <view>没有更多数据了</view>
        </view>
        <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
      </scroll-view>
    </view>
    <view
      class="cu-modal drawer-modal justify-end"
      style="z-index: 999"
      :class="modalName == 'DrawerModalR' ? 'show' : ''"
    >
      <scroll-view scroll-y="true" class="pop-scroll">
        <view class="tittit" :style="[{ top: 'calc(' + CustomBar1 + 'px' + ' + 36px )' }]">
          <view @click="hideModal()">×</view>筛选
        </view>
        <view
          class="cu-dialog basis-lg"
          @tap.stop
          :style="[
            {
              top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
              height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
            },
          ]"
        >
          <view class="cu-list menu text-left">
            <view style="height: 80rpx"></view>
            <view class="leibie">
              结算方式
              <view class="list">
                <view
                  @click.stop="typeClick(index, 'type5')"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type5"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="leibie">
              薪资范围
              <view class="salaryRange">
                <view class="inputs">
                  <input
                    class="input"
                    v-model="minimumWage"
                    @input="inputChage1"
                    placeholder="最低薪资"
                    type="digit"
                  />元
                </view>
                <span class="span">-</span>
                <view class="inputs">
                  <input
                    class="input"
                    v-model="maximumSalary"
                    @input="inputChage2"
                    placeholder="最高薪资"
                    type="digit"
                  />元
                </view>
                <view class="qued" @click="define"> 确定 </view>
              </view>
            </view>
            <view class="leibie">
              性别要求
              <view class="list">
                <view
                  @click.stop="typeClick(index, 'typexb')"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in typexb"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="position">
              <view class="position_top" @click="positionCategory()">
                <view class="title"> 岗位类型 </view>
                <image
                  class="image"
                  src="https://pic.bangbangtongcheng.com/static/bbzc/sx_yjt.png"
                  mode=""
                ></image>
              </view>
              <view class="list" v-if="ZWLX.length">
                <view class="lable" v-for="(i, j) in ZWLX" :key="j">
                  {{ i.split(',')[2] }}
                  <view class="close" @click="close(i)">
                    <image
                      class="image"
                      src="https://pic.bangbangtongcheng.com/static/bbzc/sx_close.png"
                      mode=""
                    ></image>
                  </view>
                </view>
              </view>
            </view>
            <view class="leibie">
              工作时段
              <view class="timeInterval">
                <view class="xbRadio">
                  <view class="radio" @click.stop="tabClickgz(1)">
                    <view class="radio_item" :class="workHours == 1 ? 'radioxz' : ''"></view>
                    <span>不限</span>
                  </view>
                </view>
                <view class="selector">
                  <picker
                    mode="multiSelector"
                    @change="Change1($event)"
                    :value="timeIndex1"
                    :range="timeOptions"
                  >
                    <view class="selector_item">
                      {{ timeVal1 ? timeVal1 : '请选择' }}
                      <image
                        class="image"
                        src="https://pic.bangbangtongcheng.com/static/bbzc/corporation/gs_gd.png"
                        mode=""
                      ></image>
                    </view>
                  </picker>
                  <view style="margin: 0 16rpx; font-size: 34rpx">至</view>
                  <picker
                    mode="multiSelector"
                    @change="Change2($event)"
                    :value="timeIndex2"
                    :range="timeOptions"
                  >
                    <view class="selector_item">
                      {{ timeVal2 ? timeVal2 : '请选择' }}
                      <image
                        class="image"
                        src="https://pic.bangbangtongcheng.com/static/bbzc/corporation/gs_gd.png"
                        mode=""
                      ></image>
                    </view>
                  </picker>
                </view>
              </view>
            </view>
            <view class="leibie">
              用工周期
              <view class="timeInterval" style="flex-flow: row wrap">
                <view class="xbRadio">
                  <view class="radio" @click.stop="tabClickyg(1)">
                    <view class="radio_item" :class="recruitUse == 1 ? 'radioxz' : ''"></view>
                    <span>不限</span>
                  </view>
                </view>
                <view class="selector" style="width: 100%; margin-top: 10rpx; text-align: right">
                  <!--<picker mode="multiSelector" @change="dateChange1($event)" :value="dateIndex1" @columnchange="pickerColumnDept1" :range="dateOptions">
										<view class="selector_item">
											{{dateVal1?dateVal1:"请选择"}}
											<image class="image" src="https://pic.bangbangtongcheng.com/static/bbzc/corporation/gs_gd.png" mode=""></image>
										</view>
									</picker>
									<view style="margin: 0 16rpx;font-size: 34rpx;">至</view>
									<picker mode="multiSelector" @change="dateChange2($event)" :value="dateIndex2" @columnchange="pickerColumnDept2" :range="dateOptions">
										<view class="selector_item">
											{{dateVal2?dateVal2:"请选择"}}
											<image class="image" src="https://pic.bangbangtongcheng.com/static/bbzc/corporation/gs_gd.png" mode=""></image>
										</view>
									</picker>-->
                  <picker
                    fields="day"
                    mode="date"
                    @change="dateChange1($event)"
                    :value="dateIndex1"
                  >
                    <view class="selector_item" style="width: 240rpx">
                      {{ dateVal1 ? dateVal1 : '请选择' }}
                      <image
                        class="image"
                        src="https://pic.bangbangtongcheng.com/static/bbzc/corporation/gs_gd.png"
                        mode=""
                      ></image>
                    </view>
                  </picker>
                  <view style="margin: 0 16rpx; font-size: 34rpx">至</view>
                  <picker
                    fields="day"
                    mode="date"
                    @change="dateChange2($event)"
                    :value="dateIndex2"
                  >
                    <view class="selector_item" style="width: 240rpx">
                      {{ dateVal2 ? dateVal2 : '请选择' }}
                      <image
                        class="image"
                        src="https://pic.bangbangtongcheng.com/static/bbzc/corporation/gs_gd.png"
                        mode=""
                      ></image>
                    </view>
                  </picker>
                </view>
              </view>
            </view>
            <view class="leibie">
              工作周期(可多选)
              <view class="list">
                <view
                  @click.stop="typeClickD(index, 'type6')"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type6"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="leibie">
              工作区域(可多选)
              <view class="list">
                <view
                  @click.stop="typeClickD(index, 'type7')"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type7"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="leibie">
              福利(可多选)
              <view class="list">
                <view
                  @click.stop="typeClickD(index, 'type7s')"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type7s"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="leibie">
              招聘者
              <view class="list">
                <view
                  @click.stop="typeClick(index, 'typezpz')"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in typezpz"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
          </view>
        </view>
        <view class="di">
          <view class="div l" @click.stop="cz">重置</view>
          <view class="div r" @click.stop="sx">确定</view>
        </view>
      </scroll-view>
    </view>
    <view v-if="scrollTop > 0" class="hui" @click.stop="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <uniBall></uniBall>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  export default {
    data() {
      return {
        sortChage: false,
        Recommend: [],
        imgUrl: this.$imgSrc,
        scrollTop: '0',
        scrollTop1: '0',
        trigger: false,
        downStatus: true,
        upStatus: true,
        CustomBar1: '',
        userInfo: uni.getStorageSync('Pduser'),
        viewHight: '',
        modalName: '',
        data: {
          recruitmentType: '2', //招聘类型
          pageNo: 1,
          pageSize: 10,
          longitude: '', //经度
          latitude: '', //纬度
          sort: '',
          settlementMethod: '', //结算方式
          salaryRange: '', //薪资范围
          genderRequirements: '', //性别要求
          positionCategory: '', //岗位类型
          workingHours: '', //工作时段
          employmentDate: '', //用工周期
          workCycle: '', //工作周期
          region: '', //工作区域
          fringeBenefits: '', //福利待遇
          recruiter: '', //招聘者
        },
        // 薪资范围
        minimumWage: '',
        maximumSalary: '',
        // 职位类型
        ZWLX: [],
        // 区域
        type7: [],
        type6: [],
        // 兼职福利
        type7s: [],
        type5: [
          {
            active: true,
            valueName: '不限',
          },
        ],
        typexb: [
          {
            active: true,
            valueName: '不限',
          },
          {
            active: false,
            valueName: '男',
          },
          {
            active: false,
            valueName: '女',
          },
        ],
        typezpz: [
          {
            active: true,
            valueName: '不限',
          },
          {
            active: false,
            valueName: '只看认证企业',
          },
          {
            active: false,
            valueName: '只看个人用工',
          },
        ],
        workHours: '1',
        recruitUse: '1',
        // 时分选择器数据
        timeOptions: [],
        timeIndex1: [0, 0],
        timeIndex2: [0, 0],
        timeVal1: '',
        timeVal2: '',
        // 获取日月选择器
        dateOptions: [],
        dateOptions_key: [],
        dateIndex1: [0, 0],
        dateIndex2: [0, 0],
        pickerInitR1: 0,
        pickerInitR2: 0,
        dateVal1: '',
        dateVal2: '',
        dateVal1s: '',
        dateVal2s: '',
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    filters: {
      nums(val) {
        return val.toFixed(2)
      },
    },
    async onLoad(options) {
      if (uni.getStorageSync('locationState') == 1) {
        await this.getLocation()
      }
      this.getType()
      this.getArea()
      this.timeDivision()
      this.dateDivision()
      this.CustomBar1 = this.CustomBar
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    onPageScroll: function (Object) {
      this.scrollTop = Object.scrollTop
    },
    async onPullDownRefresh() {
      this.Recommend = []
      this.data.pageNo = 1
      this.downStatus = true
      if (this.upStatus) {
        this.trigger = true
        await this.getRecommend()
      }
    },
    methods: {
      positionCategory() {
        uni.navigateTo({
          url: '/pages_recruitMoney/recruitmentInformation/selectPositionCategory?index=2',
        })
        uni.setStorageSync('zwlbss_key', this.ZWLX)
      },
      tabClickgz(index) {
        this.workHours = index
      },
      tabClickyg(index) {
        this.recruitUse = index
      },
      close(j) {
        let index = this.ZWLX.indexOf(j)
        this.ZWLX.splice(index, 1)
      },
      scroll(e) {
        this.oldScrollTop = e.detail.scrollTop
        this.scrollTop = e.detail.scrollTop
      },
      sortChages(index) {
        this.data.sort = index
        this.data.pageNo = 1
        this.Recommend = []
        this.getRecommend()
      },
      cz() {
        this.type5.forEach((v) => {
          if (v.valueName == '不限') {
            v.active = true
          } else {
            v.active = false
          }
        })
        this.typexb.forEach((v) => {
          if (v.valueName == '不限') {
            v.active = true
          } else {
            v.active = false
          }
        })
        this.typezpz.forEach((v) => {
          if (v.valueName == '不限') {
            v.active = true
          } else {
            v.active = false
          }
        })
        this.type6.forEach((v) => {
          v.active = false
        })
        this.type7.forEach((v) => {
          v.active = false
        })
        this.type7s.forEach((v) => {
          v.active = false
        })
        this.timeVal1 = ''
        this.timeVal2 = ''
        this.dateVal1 = ''
        this.dateVal2 = ''
        this.dateVal1s = ''
        this.dateVal2s = ''
        this.workHours = 1
        this.recruitUse = 1
        this.minimumWage = ''
        this.maximumSalary = ''
        this.data.settlementMethod = ''
        this.data.salaryRange = ''
        this.data.genderRequirements = ''
        this.data.positionCategory = ''
        this.data.workingHours = ''
        this.data.employmentDate = ''
        this.data.workCycle = ''
        this.data.region = ''
        this.data.fringeBenefits = ''
        this.data.recruiter = ''
        this.ZWLX = []
        this.data.pageNo = 1
        this.Recommend = []
        this.downStatus = true
        this.getRecommend()
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      totop() {
        this.scrollTop1 = this.oldScrollTop
        this.$nextTick(() => {
          this.scrollTop1 = 0
        })
      },
      sx() {
        let that = this
        // 点确定时调用一次确认薪资
        if (this.define() === false) return
        //结算方式
        this.type5.forEach((v) => {
          if (v.active) {
            this.data.settlementMethod = v.valueName == '不限' ? '' : v.valueName
          }
        })
        //性别要求
        this.typexb.forEach((v, j) => {
          if (v.active) {
            if (v.valueName == '不限') {
              this.data.genderRequirements = ''
            } else {
              this.data.genderRequirements = j
            }
          }
        })
        //岗位类型
        let zwflArr = []
        this.ZWLX.forEach((v) => {
          zwflArr.push(v.split(',')[2])
        })
        this.data.positionCategory = zwflArr.join(',')
        //工作时段
        if (this.workHours == 1) {
          this.data.workingHours = ''
        } else {
          if ((this.timeVal1 && this.timeVal2 == '') || (this.timeVal1 == '' && this.timeVal2)) {
            uni.showToast({
              title: '请选择工作时段',
              icon: 'none',
              mask: true,
            })
            return
          }
          if (this.timeVal1 && this.timeVal2) {
            this.data.workingHours = this.timeVal1 + '-' + this.timeVal2
          }
        }
        //用工周期
        if (this.recruitUse == '1') {
          this.data.employmentDate = ''
        } else {
          if ((this.dateVal1 && this.dateVal2 == '') || (this.dateVal1 == '' && this.dateVal2)) {
            uni.showToast({
              title: '请选择用工周期',
              icon: 'none',
              mask: true,
            })
            return
          } else if (this.dateVal1 && this.dateVal2) {
            let date = new Date()
            this.data.employmentDate =
              date.getFullYear() +
              '-' +
              this.dateVal1s +
              ',' +
              date.getFullYear() +
              '-' +
              this.dateVal2s
          }
        }
        //工作周期
        let arrgzzq = []
        this.type6.forEach((v) => {
          if (v.active) {
            arrgzzq.push(v.valueName)
          }
        })
        if (arrgzzq.length) {
          this.data.workCycle = arrgzzq.join(',')
        }
        //工作区域
        let arrgzqy = []
        this.type7.forEach((v) => {
          if (v.active) {
            arrgzqy.push(v.valueName)
          }
        })
        if (arrgzqy.length) {
          this.data.region = arrgzqy.join(',')
        }
        //福利待遇
        let arrfldy = []
        this.type7s.forEach((v) => {
          if (v.active) {
            arrfldy.push(v.valueName)
          }
        })
        if (arrfldy.length) {
          this.data.fringeBenefits = arrfldy.join('|')
        } else {
          this.data.fringeBenefits = ''
        }
        //招聘者
        this.typezpz.forEach((v, j) => {
          if (v.active) {
            this.data.recruiter = v.valueName == '不限' ? '' : j
          }
        })
        this.Recommend = []
        this.data.pageNo = 1
        this.downStatus = true
        this.modalName = null
        this.getRecommend()
      },
      getType() {
        let that = this
        this.$myRequest
          .get('/api/mobile/personnelOwner/queryDataDictionaryList', {
            type: '5,6,7',
          })
          .then((res) => {
            res.dataDictionaryList.forEach((el) => {
              el.active = false
              if (el.type == 5) {
                that.type5.push(el)
              } else if (el.type == 6) {
                that.type6.push(el)
              } else if (el.type == 7) {
                that.type7s.push(el)
              }
            })
          })
      },
      // 获取区域
      getArea() {
        let that = this
        this.$myRequest
          .get('/mob/home/getDictionaries', {
            type: '7',
          })
          .then((res) => {
            res.list.forEach((el) => {
              el.active = false
              if (el.type == 7) {
                that.type7.push(el)
              }
            })
          })
      },
      typeClick(index, type) {
        let that = this
        this[type].forEach((el, index1) => {
          if (index == index1) {
            that.$set(that[type][index1], 'active', !el.active)
          } else {
            that[type][index1].active = false
          }
        })
      },
      typeClickD(index, type) {
        let that = this
        this[type].forEach((el, index1) => {
          if (index == index1) {
            that.$set(that[type][index1], 'active', !el.active)
          }
        })
      },
      sousuo() {
        // if (!this.userinfo.phone) {
        // 	uni.showToast({
        // 		title: "请登录",
        // 		icon: "none",
        // 		mask: true
        // 	});
        // 	return;
        // }
        uni.navigateTo({
          url: '/pages_recruitMoney/index/zc_seach?searchType=1',
        })
      },
      details(item) {
        uni.navigateTo({
          url: '/pages_recruitMoney/recruitmentDetails/concurrently?id=' + item.id,
        })
      },
      showModal(e) {
        this.modalName = e.currentTarget.dataset.target
        uni.stopPullDownRefresh()
      },
      down() {
        if (this.downStatus) {
          this.data.pageNo++
          this.getRecommend()
        }
      },
      async up() {
        this.Recommend = []
        this.data.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          await this.getRecommend()
        }
      },
      getRecommend() {
        this.upStatus = false
        this.data.publisherId = this.userInfo.id
        console.log(this.data, 's-s-s-')
        this.$myRequest
          .get('/api/mobile/personnelOwner/getRecruitmentByRecruitmentType', this.data)
          .then((res) => {
            uni.hideLoading()
            if (!res.recruitmentInformation.length) {
              this.downStatus = false
            }
            this.upStatus = true
            this.trigger = false
            this.Recommend = this.Recommend.concat(res.recruitmentInformation.pageList)
            uni.stopPullDownRefresh()
          })
      },
      hideModal(e) {
        this.modalName = null
      },
      external() {
        this.modalName = null
        this.sortChage = false
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      async getLocation() {
        this.getLocation1()
      },
      getLocation1() {
        uni.showLoading({
          title: '加载中',
          mask: true,
        })
        let _this = this
        uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: '3000',
          success(res) {
            _this.data.latitude = res.latitude
            _this.data.longitude = res.longitude
            _this.getRecommend()
          },
          fail:(res) => {
            console.log(res, '经纬度没有授权');
            this.$SHOWMODAL_TO_SETTINGS();
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              // uni.showModal({
              //   title: '提示',
              //   content: '您已关闭位置权限或获取位置信息失败',
              //   success: function (res) {
              //     if (res.confirm) {
              //       // plus.runtime.openURL("app-settings:");
              //       if (plus.os.name === 'iOS') {
              //         plus.runtime.openURL('app-settings://')
              //       } else {
              //         var Intent = plus.android.importClass('android.content.Intent')
              //         var Settings = plus.android.importClass('android.provider.Settings')
              //         var Uri = plus.android.importClass('android.net.Uri')
              //         var mainActivity = plus.android.runtimeMainActivity()
              //         var intent = new Intent()
              //         intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
              //         var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
              //         intent.setData(uri)
              //         mainActivity.startActivity(intent)
              //       }
              //     } else if (res.cancel) {
              //       console.log('用户点击取消')
              //     }
              //   },
              // })
              return false
            }
          },
        })
      },
      // 金额校验
      inputChage1(e) {
        let length = 6
        // 数值中转
        let temp = e.target.value
        //  正则限制 3.. 以及 3.3.3的情况
        if (temp) {
          temp = temp
            .replace(/[^0-9.]|^\.|\.{2,}/g, '')
            .replace('.', '$#$')
            .replace(/\./g, '')
            .replace('$#$', '.')
          const point = temp.split('.')
          let decimals // 整数部分
          let positiveInteger // 小数部分
          // 先处理整数部分
          if (point[0]) {
            decimals = point[0].length > length ? point[0].slice(0, length) : point[0]
          }
          if (point[0].length > 1 && point[0].slice(0, 1) == '0') {
            decimals = point[0].slice(1, 2)
          }
          //  处理小数部分
          if (temp.includes('.')) {
            positiveInteger = point[1].length > 2 ? point[1].slice(0, 2) : point[1]
            temp = positiveInteger ? `${decimals}.${positiveInteger}` : `${decimals}.`
          } else {
            temp = decimals
          }
        }
        this.$nextTick(function () {
          this.minimumWage = temp
        })
      },
      inputChage2(e) {
        let length = 6
        // 数值中转
        let temp = e.target.value
        //  正则限制 3.. 以及 3.3.3的情况
        if (temp) {
          temp = temp
            .replace(/[^0-9.]|^\.|\.{2,}/g, '')
            .replace('.', '$#$')
            .replace(/\./g, '')
            .replace('$#$', '.')
          const point = temp.split('.')
          let decimals // 整数部分
          let positiveInteger // 小数部分
          // 先处理整数部分
          if (point[0]) {
            decimals = point[0].length > length ? point[0].slice(0, length) : point[0]
          }
          if (point[0].length > 1 && point[0].slice(0, 1) == '0') {
            decimals = point[0].slice(1, 2)
          }
          //  处理小数部分
          if (temp.includes('.')) {
            positiveInteger = point[1].length > 2 ? point[1].slice(0, 2) : point[1]
            temp = positiveInteger ? `${decimals}.${positiveInteger}` : `${decimals}.`
          } else {
            temp = decimals
          }
        }
        this.$nextTick(function () {
          this.maximumSalary = temp
        })
      },
      define() {
        if (this.maximumSalary == '' && this.minimumWage == '') {
          this.data.salaryRange = ''
        } else if (this.maximumSalary != '' && this.minimumWage != '') {
          if (Number(this.maximumSalary) < Number(this.minimumWage)) {
            uni.showToast({
              title: '最低薪资不能大于最高薪资',
              icon: 'none',
              mask: true,
            })
            return false
          }
          this.data.salaryRange = this.minimumWage + '-' + this.maximumSalary
        } else {
          uni.showToast({
            title: '薪资请勿只填最低或最高',
            icon: 'none',
            mask: true,
          })
          return false
        }
      },
      // 获取时分选择器数据
      timeDivision() {
        let time = []
        for (var i = 0; i <= 23; i++) {
          time.push(i)
        }
        this.timeOptions.push(time)
        let divide = []
        for (var i = 0; i < 60; i++) {
          if (i < 10) {
            divide.push('0' + i)
          } else {
            divide.push(i)
          }
        }
        this.timeOptions.push(divide)
      },
      Change1(e) {
        /* 逻辑优化，原逻辑 开始时 小于结束时 开始分大于结束分会进return 下方Change2同理 */
        // if(this.timeVal2){
        // 	const select = e.target.value;
        // 	let arr = this.timeVal2.split(':')
        // 	if (arr[0] < select[0] || (arr[0] == select[0] && arr[1] < select[1])) {
        // 		uni.showToast({
        // 			title: "开始时间不能大于结束时间",
        // 			icon: "none",
        // 			mask: true,
        // 		});
        // 		return;
        // 	}
        // }
        this.workHours = 0
        this.timeIndex1 = e.target.value
        this.timeVal1 = `${this.timeOptions[0][this.timeIndex1[0]]}:${
          this.timeOptions[1][this.timeIndex1[1]]
        }`
      },
      Change2(e) {
        // if(this.timeVal1){
        // 	const select = e.target.value;
        // 	let arr = this.timeVal1.split(':')
        // 	if(arr[0] > select[0] || (arr[0] == select[0] && arr[1] > select[1])){
        // 		uni.showToast({
        // 			title: "结束时间不能小于开始时间",
        // 			icon: "none",
        // 			mask: true,
        // 		});
        // 		return
        // 	}
        // }
        this.workHours = 0
        this.timeIndex2 = e.target.value
        this.timeVal2 = `${this.timeOptions[0][this.timeIndex2[0]]}:${
          this.timeOptions[1][this.timeIndex2[1]]
        }`
      },
      // 获取月日选择器数据
      dateDivision() {
        let date = new Date()
        let year = date.getFullYear()
        let month = []
        for (var i = 1; i <= 12; i++) {
          month.push(i)
        }
        let day = []
        for (var i = 1; i <= 12; i++) {
          let days = []
          for (var j = 1; j <= this.getMonthDay(year, i); j++) {
            if (j < 10) {
              days.push('0' + j)
            } else {
              days.push(j)
            }
          }
          day.push(days)
        }
        this.dateOptions.push(month)
        this.dateOptions.push(day[0])
        this.dateOptions_key = day
      },
      pickerColumnDept1(e) {
        if (e.detail.column == 0) {
          let arr = []
          arr = this.dateOptions_key[e.detail.value]
          this.$set(this.dateOptions, 1, arr)
          this.dateIndex1[0] = e.detail.value
          this.dateIndex1[1] = this.pickerInitR1
          let timern = setTimeout(() => {
            this.dateIndex1[1] = 0
            clearTimeout(timern)
          }, 100)
        } else {
          this.pickerInitR1 = e.detail.value
          this.dateIndex1[1] = e.detail.value
        }
      },
      pickerColumnDept2(e) {
        if (e.detail.column == 0) {
          let arr = []
          arr = this.dateOptions_key[e.detail.value]
          this.$set(this.dateOptions, 1, arr)
          this.dateIndex2[0] = e.detail.value
          this.dateIndex2[1] = this.pickerInitR2
          let timern = setTimeout(() => {
            this.dateIndex2[1] = 0
            clearTimeout(timern)
          }, 100)
        } else {
          this.pickerInitR2 = e.detail.value
          this.dateIndex2[1] = e.detail.value
        }
      },
      dateChange1(e) {
        let data1 = new Date(this.dateVal2s).getTime()
        let data2 = new Date(e.target.value).getTime()
        if (data1 < data2) {
          uni.showToast({
            title: '开始日期不能大于结束日期',
            icon: 'none',
            mask: true,
          })
          return
        }
        this.recruitUse = 0
        this.dateIndex1 = e.target.value
        const date = e.target.value.replace(/-/g, '-').split('-')
        this.dateVal1 = date[0] + '年' + date[1] + '月' + date[2] + '日'
        this.dateVal1s = e.target.value

        // if(!this.getTimeDate(this.dateOptions[0][e.target.value[0]],this.dateOptions[1][e.target.value[1]])){
        // 	return
        // }
        // if(this.dateVal2){
        // 	let dateVal2_month = this.dateVal2.split('月')[0]
        // 	let dateVal2_date = this.dateVal2.split('月')[1].split('日')[0]
        // 	if(dateVal2_month < this.dateOptions[0][e.target.value[0]]){
        // 		uni.showToast({
        // 			title: "结束日期不能小于开始日期",
        // 			icon: "none",
        // 			mask: true,
        // 		});
        // 		return
        // 	}else if(dateVal2_month == this.dateOptions[0][e.target.value[0]]){
        // 		if( Number(dateVal2_date) < Number(this.dateOptions[1][e.target.value[1]])){
        // 			uni.showToast({
        // 				title: "结束日期不能小于开始日期",
        // 				icon: "none",
        // 				mask: true,
        // 			});
        // 			return
        // 		}
        // 	}
        // }
        // this.recruitUse=0
        // this.dateIndex1 = e.target.value
        // this.dateVal1 = `${this.dateOptions[0][this.dateIndex1[0]]}月${this.dateOptions[1][this.dateIndex1[1]]}日`
        // this.dateVal1s = `${this.dateOptions[0][this.dateIndex1[0]]}-${this.dateOptions[1][this.dateIndex1[1]]}`
      },
      dateChange2(e) {
        let data1 = new Date(this.dateVal1s).getTime()
        let data2 = new Date(e.target.value).getTime()
        if (this.dateVal1s && data1 > data2) {
          uni.showToast({
            title: '结束日期不能小于开始日期',
            icon: 'none',
            mask: true,
          })
          return
        }
        this.recruitUse = 0
        this.dateIndex2 = e.target.value
        const date = e.target.value.replace(/-/g, '-').split('-')
        this.dateVal2 = date[0] + '年' + date[1] + '月' + date[2] + '日'
        this.dateVal2s = e.target.value

        // if(!this.getTimeDate(this.dateOptions[0][e.target.value[0]],this.dateOptions[1][e.target.value[1]])){
        // 	return
        // }
        // if(this.dateVal1){
        // 	let dateVal1_month = this.dateVal1.split('月')[0]
        // 	let dateVal1_date = this.dateVal1.split('月')[1].split('日')[0]
        // 	if(dateVal1_month > this.dateOptions[0][e.target.value[0]]){
        // 		uni.showToast({
        // 			title: "开始日期不能大于结束日期",
        // 			icon: "none",
        // 			mask: true,
        // 		});
        // 		return
        // 	}else if(dateVal1_month == this.dateOptions[0][e.target.value[0]]){
        // 		if( Number(dateVal1_date) > Number(this.dateOptions[1][e.target.value[1]])){
        // 			uni.showToast({
        // 				title: "开始日期不能大于结束日期",
        // 				icon: "none",
        // 				mask: true,
        // 			});
        // 			return
        // 		}
        // 	}
        // }
        // this.recruitUse=0
        // this.dateIndex2 = e.target.value
        // this.dateVal2 = `${this.dateOptions[0][this.dateIndex2[0]]}月${this.dateOptions[1][this.dateIndex2[1]]}日`
        // this.dateVal2s = `${this.dateOptions[0][this.dateIndex2[0]]}-${this.dateOptions[1][this.dateIndex2[1]]}`
      },
      // 判断选择日期是否过期
      getTimeDate(time1, time2) {
        let month = new Date().getMonth() + 1
        let date = new Date().getDate()
        if (month < time1) {
          return true
        } else if ((month = time1)) {
          if (Number(date) > Number(time2)) {
            uni.showToast({
              title: '选择日期已过期',
              icon: 'none',
              mask: true,
            })
            return false
          } else {
            return true
          }
        } else {
          uni.showToast({
            title: '选择日期已过期',
            icon: 'none',
            mask: true,
          })
          return false
        }
      },
      // 获取每年每个月有多少天
      getMonthDay(year, month) {
        let days = new Date(year, month, 0).getDate()
        return days
      },
    },
  }
</script>

<style lang="less" scoped>
  .tittit {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #f8f8f8;
    z-index: 9999;
    max-width: 100%;
    width: 600rpx;
    transition-duration: 0.3s;
    transform: translateX(100%);

    text-align: center;
    line-height: 80rpx;
    font-size: 30rpx;
    border-bottom: 2rpx solid #cccccc;

    view {
      position: absolute;
      top: 0rpx;
      left: 20rpx;
      color: #999999;
      font-size: 54rpx;
      font-weight: 100;
    }
  }

  .show .tittit {
    transform: translateX(0%);
  }

  .selector {
    display: flex;
    align-items: center;
    .selector_item {
      width: 160rpx;
      height: 60rpx;
      background-color: #ffffff;
      border-radius: 8rpx;
      border: 1px solid #999999;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
      .image {
        width: 22rpx;
        height: 22rpx;
      }
    }
  }

  .xbRadio {
    display: flex;
    align-items: center;
    .radio {
      width: 130rpx;
      display: flex;
      align-items: center;
      margin-right: 0;

      .radio_item {
        width: 36rpx;
        height: 36rpx;
        border: 1px solid #c9c9c9;
        border-radius: 36rpx;
        margin-right: 14rpx;
      }

      span {
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
      }

      .radioxz {
        border: 1px solid #64b6a8;
        position: relative;
      }

      .radioxz::before {
        content: '';
        width: 24rpx;
        height: 24rpx;
        border-radius: 24rpx;
        background-color: #64b6a8;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .cu-list {
    padding-bottom: calc(98rpx + env(safe-area-inset-bottom) / 2);
    background-color: #fff;
    .leibie {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;
      margin-right: 20rpx;
      .timeInterval {
        display: flex;
        align-items: center;
      }
      .salaryRange {
        display: flex;
        align-items: center;
        .inputs {
          width: 160rpx;
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
          .input {
            font-size: 24rpx;
            height: 58rpx;
            border-bottom: 1px solid #e0e0e0;
            margin-right: 10rpx;
          }
        }
        .span {
          margin: 0 10rpx;
        }
        .qued {
          width: 120rpx;
          height: 58rpx;
          background-color: #64b6a8;
          border-radius: 4rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 20rpx;
        }
      }
      .list {
        width: 100%;
        margin-top: 24rpx;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .li {
          min-width: 90rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10rpx 20rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }
    .position {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;
      margin-right: 20rpx;
      .position_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16rpx;
        .title {
          font-weight: 400;
        }
        .image {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .lable {
          font-size: 26rpx;
          font-weight: 400;
          color: #64b6a8;
          padding: 6rpx 20rpx;
          border: 1px solid #64b6a8;
          position: relative;
          border-radius: 6rpx;
          margin-right: 20rpx;
          margin-right: 14rpx;
          .close {
            width: 20rpx;
            height: 20rpx;
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            .image {
              width: 18rpx;
              height: 18rpx;
            }
          }
        }
      }
    }
  }

  .zbc {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999;
  }

  .box {
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
    /* #ifdef MP-WEIXIN */
    text-align: left;
    display: flex;
    align-items: center;
    /* #endif */
    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      left: 30rpx;
    }
    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 28rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
      bottom: 16rpx !important;
      right: 30rpx;
      // #ifdef APP
      // top: 50%;
      // #endif
    }
  }
  .tit {
    margin: 0 30rpx;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .view {
      font-size: 36rpx;
      font-weight: 550;
      color: #18a291;
    }
    .tit_right {
      display: flex;
      align-items: center;
      .sort {
        font-size: 32rpx;
        margin-right: 26rpx;
        position: relative;
        span {
          margin-left: 8rpx;
          font-size: 20rpx;
        }
        .administrations {
          width: 210rpx;
          height: 240rpx;
          background-color: #fff;
          position: absolute;
          right: 0rpx;
          bottom: -260rpx;
          box-shadow: 0px 0px 20px 1px #d0d0d0;
          z-index: 100;
          padding: 0 32rpx;
          display: flex;
          flex-direction: column;
          .items {
            height: 94rpx;
            color: #5a5e66;
            font-size: 28rpx;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &::before {
            content: '';
            display: inline-block;
            border-left: 24rpx solid transparent;
            border-right: 20rpx solid transparent;
            border-bottom: 24rpx solid #fff;
            position: absolute;
            right: 12rpx;
            top: -22rpx;
          }
        }
      }
      .sai {
        font-size: 32rpx;
        span {
          margin-left: 8rpx;
          font-size: 20rpx;
        }
      }
    }
  }
  .tit_list {
    margin-left: 30rpx;
    margin-right: 30rpx;
    width: 690rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    .vacancy {
      width: 100%;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 1px solid #e0e0e0;
      .vehicleRecom {
        font-size: 36rpx;
        font-weight: 600;
        color: #333333;
        line-height: 44rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
        .tagLabel {
          vertical-align: top;
          background: #64b6a8;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          width: 106rpx;
          margin-right: 10rpx;
          padding: 2rpx 6rpx;
          border-radius: 4rpx;
        }
      }
      .vacancy_center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16rpx;
        .vacancy_status {
          span {
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
          }
          span:nth-child(1) {
            margin-right: 16rpx;
          }
        }
        .vacancy_price {
          font-size: 30rpx;
          font-weight: 550;
          color: #e00000;
        }
      }
      .vacancy_biaoq {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16rpx;
        .vacancy_label {
          flex: 1;
          height: 48rpx;
          position: relative;
          overflow: hidden;
          white-space: nowrap;
          .shade {
            position: absolute;
            right: 0;
            top: 0;
            width: 100rpx;
            height: 48rpx;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
          }
          .label {
            display: inline-block;
            padding: 10rpx;
            background-color: #f0f0f0;
            margin-right: 10rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
            border-radius: 4rpx;
          }
          .label:nth-last-child(1) {
            margin-right: 0rpx;
          }
        }
        .gend {
          text-align: right;
          width: 80rpx;
          height: 100%;
          font-size: 24rpx;
          color: #888888;
        }
      }
      .personalInformation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 28rpx;
        .personalInformation_left {
          display: flex;
          flex-direction: column;
          .personalInformation_image {
            width: 42rpx;
            height: 42rpx;
            border-radius: 42rpx;
            margin-right: 12rpx;
          }
          .GR {
            display: flex;
            align-items: center;
            .name {
              font-size: 24rpx;
              font-weight: 400;
              color: #333333;
            }
          }
          .GS {
            display: flex;
            align-items: center;
            .corporation {
              font-size: 24rpx;
              font-weight: 400;
              color: #333333;
            }
          }
        }
        .personalInformation_right {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .personalInformation_Time {
            font-size: 24rpx;
            font-weight: 400;
            color: #888888;
            margin-bottom: 6rpx;
            text-align: right;
          }
          .personalInformation_distance {
            font-size: 24rpx;
            font-weight: 400;
            color: #888888;
            text-align: right;
          }
        }
      }
    }
  }

  .hui {
    position: fixed;
    right: 30rpx;
    bottom: 154rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 34rpx;
    font-size: 26rpx;
    box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

    image {
      width: 46rpx;
      height: 46rpx;
      margin-right: 18rpx;
    }
  }

  .cu-dialog {
    max-width: 100%;
    width: 600rpx;
  }

  .basis-lg {
    flex-basis: 600rpx;
    overflow: auto;
  }
  .pop-scroll {
    position: relative;
  }

  .di {
    position: absolute;
    transform: translateY(0rpx);
    width: 100%;
    bottom: 0;
    left: 75rpx;

    .div {
      padding-bottom: calc(env(safe-area-inset-bottom) / 2);
      height: calc(env(safe-area-inset-bottom) / 2 + 50px);
      display: inline-block;
      width: 300rpx;
      text-align: center;
      line-height: 98rpx;
      font-size: 30rpx;
    }

    .l {
      background: #e0e0e0;
    }

    .r {
      background: #64b6a8;
      color: #fff;
    }
  }

  .scroll-view {
    height: 100%;
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
</style>
